<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02_JSX_DEMO</title>
  </head>
  <body>
    <h2>前端JS框架列表</h2>
    <div id="example1"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 数据
      const data = [
        "jQuery",
        "BootStrap",
        "Nodejs",
        "Express",
        "React",
        "Webpack",
      ];
      /*
        数组常用方式：
          1. push shift pop ...
          2. map 返回新数组：长度和原数组一致，里面的值会发生变化（长度不变，值变）
             filter 返回新数组：长度会减少，里面的值不变(长度变，值不变)
             some 返回布尔值, 有一个为真，就返回true，全部为假，返回false
             every 返回布尔值，有一个为假，就返回false,全部为真，返回true
             reduce (长度变，值变)
             find 查找数组符合条件的某个元素
                找到了，就会这个元素
                没有找到，就是undefined
      */
      const newData = data.map((item, index) => {
        // 在React中要求遍历的每一个子元素，都必须添加key属性，它的值必须是唯一的
        return <li key={index}>{item}</li>;
      });
      // const data = [
      //   <li>jQuery</li>,
      //   <li>BootStrap</li>,
      //   <li>Nodejs</li>,
      //   <li>Express</li>,
      //   <li>React</li>,
      //   <li>Webpack</li>,
      // ];
      // 创建虚拟DOM对象
      // 会自动展开数组进行显示
      const vDOM = <ul>{newData}</ul>;

      const vDOM1 = (
        <ul>
          {data.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </ul>
      );
      // 渲染到页面指定容器中
      ReactDOM.render(vDOM1, document.getElementById("example1"));
    </script>
  </body>
</html>
